:root {
    /* el-aside */
    /*--el-aside-width: 150px;*/
    --sf-header-height: 80px;
}

.el-container {

}

.el-header {
    --el-header-padding: 0;
}

.el-main {
    --el-main-padding: 0;
}


.el-aside > .el-menu {

}

.el-aside{
    .el-menu--vertical .el-menu-item {
        --el-menu-item-height: 48px;
    }

    .el-menu--vertical .el-menu-item:hover {
        --el-menu-hover-bg-color: #fff;
    }

    .el-menu--vertical .el-menu-item.is-active {
        transition: all 0.3s ease-in-out;
    }

    .el-menu--vertical .el-menu-item:hover::before,
    .el-menu--vertical .el-menu-item.is-active::before {
        content: '';
        position: absolute;
        left: 14px;
        transform: translateX(50%);
        width: .3em;
        height: 1rem;
        border-radius: 6px;
        background-color: var(--el-color-primary-light-3);
    }

    .el-menu--vertical .el-menu-item:hover::after,
    .el-menu--vertical .el-menu-item.is-active::after {
        content: '';
        position: absolute;
        display: inline;
        left: 12px;
        transform: translateX(0);
        width: calc(100% - 24px);
        border-radius: 6px;
        height: 80%;
        background-color: var(--el-color-primary-light-5);
        opacity: 0.2;
    }

}


.layout > .el-header {
    height: var(--sf-header-height);
}

.el-scrollbar__bar.is-vertical {
    padding: 0;
    margin: 0;
}

.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
    background-color: var(--el-color-primary-light-9);
    border-radius: 1px;
    width: 8px;
    right: 0;
    margin: 0;
    z-index: 111;
}

.el-tabs__item.is-top.is-active .el-dropdown {
    color: var(--el-color-primary);
}

.el-tabs__item.is-top.is-active .el-dropdown {
    color: var(--el-color-primary);
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: var(--el-color-primary);
}